import React, { useEffect, useState } from "react"
import axios from "axios"
import { useAppStore } from "store"
import storage from "../helpers/storage";

const GitCodeStarButton = () => {
    const [visible, setVisible] = useState(false) 
    const [starCount, setStarCount] = useState(0)
    const store = useAppStore()
    const { accessTokenCache } = storage.get(["accessTokenCache"]);
    const token = store.token || accessTokenCache

    useEffect(() => {
        const getRepoStarCount = async () => {
            let count = 0;
            try {
                const { data } = await axios.get(`https://api.gitcode.com/api/v5/repos/huqi/star-history`, {
                    headers: {
                        Accept: "application/vnd.github.v3.star+json",
                        Authorization: token ? `Bearer ${token}` : ""
                    }
                })
                count = data.stargazers_count;
                setVisible(true)
            } catch (error: any) {
              // Fail silently for 403 (rate limit/auth issues) - just don't show the button
              if (error?.response?.status === 403) {
                console.debug('GitCode API rate limit or auth issue, hiding star button')
              } else {
                console.error('Failed to fetch GitCode star count', error)
              }
            }
            return count;
        }

        getRepoStarCount().then((count) => setStarCount(count))
    }, [])

    return (
        <>
        { visible && (
            <a
                className="border rounded flex flex-row justify-start items-center text-black bg-white text-sm shadow-inner hover:opacity-80"
                href="https://gitcode.com/huqi/star-history"
                target="_blank"
                aria-label="Star huqi/star-history on GitCode"
            >
                <span className="pr-1 pl-2 h-full flex flex-row justify-center items-center bg-gray-100 border-r font-medium">
                    <svg  className="fab text-base mr-1 -mt-px"  viewBox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7991" width="18" height="18"><path d="M479.663158 988.429474c-90.004211-10.24-187.553684-48.505263-247.376842-96.471579-33.953684-26.947368-90.004211-88.387368-111.023158-120.724211-64.134737-99.166316-90.004211-222.046316-70.602105-333.608421 18.863158-107.250526 63.056842-191.326316 141.20421-267.856842 135.814737-133.12 353.010526-175.157895 527.090526-101.861053 57.128421 24.252632 112.101053 58.206316 134.736843 82.997895 44.193684 49.044211 28.025263 128.808421-31.258948 158.450526-25.330526 12.395789-72.218947 12.934737-90.543158 1.077895s-35.031579-44.193684-39.343158-77.069473c-2.155789-15.629474-4.850526-28.564211-5.389473-28.564211-1.077895 0-14.551579 7.545263-29.642106 16.168421-49.583158 29.103158-64.134737 33.414737-140.126315 38.265263-39.882105 2.155789-84.075789 5.928421-97.549474 8.084211-24.791579 3.233684-54.972632-1.077895-102.938947-16.168421l-25.330527-8.084211 1.077895 52.277895c0.538947 50.661053 0 53.355789-21.557895 98.088421-28.025263 58.206316-38.265263 93.237895-42.576842 144.976842-10.24 124.496842 57.667368 217.195789 186.47579 253.844211 83.536842 23.713684 221.507368 18.863158 296.421052-10.778948 71.68-28.564211 134.736842-94.854737 134.736842-142.282105 0-19.402105-24.791579-44.193684-51.738947-50.661053-11.317895-3.233684-54.433684-7.006316-95.393684-8.623158-86.770526-3.772632-147.132632-11.856842-163.84-22.635789s-25.330526-40.96-17.785263-63.59579c7.545263-23.713684 19.402105-33.953684 54.433684-46.888421 23.713684-9.162105 40.96-10.778947 109.945263-10.778947 146.593684 0 215.578947 18.324211 269.473684 72.218947 61.978947 62.517895 68.446316 157.372632 16.168421 241.448421-77.069474 123.418947-168.151579 194.021053-291.570526 225.818948-41.498947 11.317895-151.444211 18.324211-196.176842 12.934737z" fill="#D62240" p-id="7992"></path></svg>

                    <span className="mt-px">Star</span>
            </span>
            <div className="h-full block px-2 mt-px font-medium">{starCount}</div>
            </a>
        )}
        </>
    )
}

export default GitCodeStarButton
